<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    <p>count 值：{{ $store.state.count }}</p>
    <button @click="fn1" class="btn btn-primary">+1</button>
    <button @click="fn2" class="btn btn-primary">+5</button>

    <button @click="fn3" class="btn btn-primary">异步修改count</button>
  </div>
</template>

<script>
export default {
  name: 'Left',
  methods: {
    fn1 () {
      // 直接改，1. 调试工具追踪不到，不利于调试维护 2. 如果vuex开启了严格模式，还会报错
      // this.$store.state.count++
      // 如何调用mutations的方法


      this.$store.commit('addCount')
    },

    fn2 () {
      this.$store.commit('addCountWithNum', 5)
    },

    fn3 () {
      
      this.$store.dispatch('reqCount')
    }
  }
}
</script>

<style></style>
